<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>树组件</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
    <script src="../zujian/han/han.js"></script>
    <script src="../zujian/jqueryAndBootStrap/bootstrapbootbox/jquery3.3.1.min.js"></script>



</head>
<body>
<div id="test1"></div>


<script src="../zujian/layui/layuiCeShiYong.js"></script>
<script>
    layui.use(['tree'], function () {


        var tree = layui.tree;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        //渲染
        var inst1 = tree.render({
            // 是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。
            showLine:true,
            //true的时候只能点击左侧图标展开
            onlyIconControl:false,
            //手风琴模式,就是展开一级,邻居级别就自动合并,true的时候点击改级,临级别会合并
            accordion:true,
            //是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 href 参数（值为 url 格式）
            isJump:true,
            //是否开启修改图标模式,true的时候可以编辑和删除
            // edit:true,
            edit: ['add', 'update', 'del'],
            //  是否显示复选框
            showCheckbox:true,
            elem: '#test1'  //绑定元素
            ,id:'demoId' //定义索引
            , data: [{
                id:"1213",
                // 节点是否初始为选中状态（如果开启复选框的话），默认 false
                checked:false,
                // 节点是否初始展开，默认 false,只能展开一层
                spread:true,
                title: '江西'//一级菜单
                , children: [{
                    // 自定义各类默认文本，目前支持以下设定：  没有title的时候显示   defaultNodeName
                    text: {
                        defaultNodeName: '未命名' //节点默认名称
                        ,none: '无数据' //数据为空时的提示文本
                    },
                   title:'南昌', //二级菜单
                    id:"sldkfjsaldkfjlsa1"
                    , children: [{
                        //是否可用,
                        disabled:false,
                        checked:false,
                        id:"sldkfjsaldkfjlsa2",
                        href:"https://www.baidu.com",
                        title: '高新区' //三级菜单
                        //…… //以此类推，可无限层级
                    }]
                }]
            }, {
                title: '陕西' //一级菜单
                , children: [{
                    title: '西安' //二级菜单
                }]
            }]

            //////////////////////////////////////////////////////////////////////////////////////////////////////////////
            // 通过 operate 实现函数，对节点进行增删改等操作时，返回操作类型及操作节点
            ,operate: function(obj){
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var elem = obj.elem; //得到当前节点元素

                //Ajax 操作
                var id = data.id; //得到节点索引
                if(type === 'add'){ //增加节点
                    dyn("增加节点")
                    dyn(id)//这个是母节点的id
                    //返回 key 值,返回的是增加的节点的id
                    return haomiaoshijianchuo3suiji();
                } else if(type === 'update'){ //修改节点
                    dyn("修改节点")
                    dyn(elem.find('.layui-tree-txt').html())
                    dyn(id)
                    dyn(elem.find('.layui-tree-txt').html()); //得到修改后的内容
                } else if(type === 'del'){ //删除节点
                    dyn("删除节点")
                    dyn(id)
                }
            }
            ////////operate: function(obj){   结束//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            //  点击复选框时触发，返回的参数如下：
            ,oncheck: function(obj){
                dyn("=======点击复选框时触发=================得到当前点击的节点数据==================================")
                dyn(JSON.stringify(obj.data)); //得到当前点击的节点数据
                dyn("======点击复选框时触发======结果是true或者false,就是展开或者没有展开=======//得到当前节点的展开状态：open、close、normal=======================================")
                dyn(JSON.stringify(obj.checked)); //得到当前节点的展开状态：open、close、normal
                dyn("=====点击复选框时触发===========//得到当前节点元素==========================================")
                dyn(JSON.stringify(obj.elem)); //得到当前节点元素
                dyn("=================找到所有的被选中的====1=====================================")
                dyj($("div.layui-form-checked + span"))
                dyn("=================找到所有的被选中的====1。0=====================================")
                $("div.layui-form-checked + span")
                dyn("=================找到所有的被选中的====2=====================================")
               var xxx= $("div.layui-form-checked + span")

            }
            ,click:function(obj){
                console.log(obj.data); //得到当前点击的节点数据
                console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                console.log(obj.elem); //得到当前节点元素

                console.log(obj.data.children); //当前节点下是否有子节点
            }
            //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        });
        //////var inst1 = tree.render结束////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        //执行节点勾选
        // tree.setChecked('demoId', 'sldkfjsaldkfjlsa1'); //单个勾选 id 为 1 的节点
        // tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点
    });
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

</script>
</body>
</html>